<template>
    <div class="personage">
        <div class="header"></div>
        <div class="wrapper">
            <div class="person">
                <h3>
                    <span>个人设置</span>
                </h3>
                <el-tabs type="border-card" style="box-shadow: none;" class="tabs">
                    <el-tab-pane label="基本设置">
                        <div class="setting">
                            <el-form label-width="120px">
                                <el-row>
                                    <el-col :span="17">
                                        <el-form-item label="昵称："  prop="nickname">
                                            <el-input  auto-complete="off" size="mini" v-model="model.nickname"></el-input>
                                        </el-form-item>
                                        <el-form-item label="介绍：" prop="description">
                                            <el-input
                                                    type="textarea"
                                                    :rows="7"
                                                    size="small"
                                                    show-word-limit
                                                    maxlength="500"
                                                    style="width: 100%;font-size: 12px"
                                                    v-model="model.description"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="7">
                                        <el-form-item style="margin-left: -65px;margin-top: 6px">
                                            <div class="imgBody" v-if="model.avatar">
                                                <i
                                                        class="el-icon-error inputClass"
                                                        v-show="icon"
                                                        @click="deletePhoto()"
                                                        @mouseover="icon = true"
                                                ></i>
                                                <img
                                                        @mouseover="icon = true"
                                                        @mouseout="icon = false"
                                                        v-lazy="model.avatar"
                                                >
                                            </div>
                                            <div v-else style="color: #0c73c2">
                                                <el-upload
                                                        style="margin-top: -10px"
                                                        class="upload-demo"
                                                        :before-upload="beforeAvatorUpload"
                                                        :on-success="handleAvatorSuccess"
                                                        drag
                                                        :action="uploadAction"
                                                        :show-file-list="false"
                                                        multiple>
                                                    <i class="el-icon-upload"></i>
                                                    <div>
                                                        将文件拖到此处，或<span style="color:blue">修改头像</span>
                                                    </div>
                                                </el-upload>
                                            </div>

                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="6.5">
                                        <el-form-item label="性别：" prop="sex">
                                            <el-radio-group v-model="model.sex">
                                                <el-radio :label="1">男</el-radio>
                                                <el-radio :label="2">女</el-radio>
                                                <el-radio :label="3">保密</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="地区：" prop="diqu">
                                            <el-select v-model="model.city" placeholder="地区" style="width: 100%;"  filterable size="small">
                                                <el-option v-for=" item in cities" :key="item.code" :label="item.city" :value="item.code" >
                                                    <span style="float: left; color: #8492a6; font-size: 13px">{{String(item.code).slice(0,4) }}-{{ item.city }}</span>
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-form-item style="float: left; margin-right: 20px;margin-top:20px">
                                    <el-button type="primary"  size="small" @click="editUserInfo" style="background-color: #0c73c2;width: 90px;border: none">  保 存  </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="修改密码">
                        <div class="reset-pass">
                            <div class="personal">
                                <el-collapse v-model="activeNames">
                                    <el-collapse-item title="修改密码须知" name="1">
                                        <div>此修改密码功能仅适用于账号和密码登录</div>
                                        <div>对于第三方登录的账号，无法进行密码修改</div>
                                    </el-collapse-item>
                                </el-collapse>
                                <el-form ref="userInfoForm" label-position="left" :model="form" label-width="80px" :rules="validatorRules">
                                    <el-form-item label="旧密码:" :label-width="labelWidth" prop="oldpassword">
                                        <el-input show-password type="password" v-model="form.oldpassword" style="width: 100%" size="small"  ></el-input>
                                    </el-form-item>
                                    <el-form-item label="新密码" :label-width="labelWidth" prop="password">
                                        <el-input show-password type="password" v-model="form.password" style="width: 100%" size="small"></el-input>
                                    </el-form-item>
                                    <el-form-item label="重复密码" :label-width="labelWidth" prop="confirmpassword">
                                        <el-input  @blur="handleConfirmBlur" show-password type="password" v-model="form.confirmpassword" style="width: 100%" size="small"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button  type="primary" style="background-color: #0c73c2;width: 90px;border: none;margin-top: 20px" @click="changepass" size="small"> 提 交 </el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="绑定设置">绑定设置</el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import city from '@/assets/city'

    export default {
        name: "home-personage",
        data() {
            return {
                uploadAction:"http://localhost:8080/CloudData-Pro/sys/common/upload",
                formLabelWidth: "100px",
                model: {},
                cities:[],
                icon: false, //控制删除图标的显示
                dialogImageUrl: '',
                dialogVisible: false,
                labelWidth: "80px",
                activeNames: ['1'], //激活的折叠面板
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
                form: {},
                validatorRules:{
                    oldpassword:[
                        {required: true, message: '请输入旧密码', trigger: 'blur'},
                        {min: 5, max: 20, message: '密码长度在5到20个字符'},
                    ],
                    password:[
                        { required: true, message: '新密码不能为空', trigger: 'blur'},
                    ],
                    confirmpassword: [
                        {required: true, message: '请确认新密码', trigger: 'blur'},
                        { validator: this.compareToFirstPassword, trigger: "blur", required: true },
                    ]
                },
            }
        },
        computed: {
            id(){
                return localStorage.getItem('USERID');
            }
        },
        methods:{

            compareToFirstPassword  (rule, value, callback) {
                const form = this.form;
                if (value && value !== form.password) {
                    callback('两次输入的密码不一样！');
                } else {
                    callback()
                }
            },
            handleConfirmBlur  (e) {
                const value = e.target.value
                this.confirmDirty = this.confirmDirty || !!value
            },
            //上传之前的校验
            beforeAvatorUpload(file){
                const isJPG = file.type=='image/jpeg';
                const isLt10M = file.size /1024/1024<10;
                if(!isJPG){
                    this.$notify.error('上传头像图片只能是JPG格式');
                    return false;
                }
                if(!isLt10M){
                    this.$notify.error('上传头像图片不能大于10MB');
                    return false;
                }
                return true;
            },
            //上传成功
            handleAvatorSuccess(res,file){
                if(res.code == 0){
                    this.model.avatar = res.message;
                }else{
                    this.$notify.error('上传头像失败！');
                }
            },
            initCity() {
                function sortCodeASC(a,b) {
                    return a.code-b.code;
                }
                this.cities = city.sort(sortCodeASC);

            },
            deletePhoto: function() {
                this.model.avatar = "";
            },

            async changepass(){
                if (this.id==null){
                    this.$message.error("先登录系统！");
                }else {
                    let obj = await this.$API.changepassword(localStorage.getItem('USERID'),this.form.oldpassword,this.form.password);
                    if (obj.code==201){
                        this.$notify({
                            message: '旧密码错误！',
                            type: 'error',
                        });
                        this.form= {};
                    }else if (obj.code==200){
                        this.$notify({
                            message: '修改成功！',
                            type: 'success',
                        });
                        this.$store.dispatch("exit");
                        if (this.$route.path ==='/user/home'){
                            this.isActive = 1;
                            this.$router.push("/home/discover");
                        }else if (this.$route.path ==='/user/level'){
                            this.isActive = 1;
                            this.$router.push("/home/discover");
                        }
                        else if (this.$route.path ==='/user/personage'){
                            this.isActive = 1;
                            this.$router.push("/home/discover");
                        }
                        let timer = setInterval(() => {
                            if (localStorage.getItem("COOKIE") == null) {
                                index--;
                                if (index <= 0) {
                                    clearInterval(timer);
                                }
                            }
                        }, 1000);
                        timer = setInterval(()=>{
                            location.reload();
                            clearInterval(timer);
                        },500);
                    }else {
                        this.$notify({
                            message: '系统异常！',
                            type: 'error',
                        });
                    }
                }
            },
            async initUser() {
                if (this.id==null){
                    this.$message.error("先登录系统！");
                }else {
                    let obj = await this.$API.queryUserInfo(localStorage.getItem('USERID'));
                    if (obj.code == 200){
                        this.model = obj.result.user
                    }else {
                        this.$message.error("查询失败！");
                    }
                }
            },
            async editUserInfo() {
                if (this.id==null){
                    this.$message.error("先登录系统！");
                }else{
                    let obj = await this.$API.editUser(this.model);
                    if (obj.code==200){
                        this.$notify({
                            message: '修改成功！',
                            type: 'success'
                        });
                        location.reload();
                    }else {
                        this.$notify({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                }
            },
        },
        mounted() {
            this.initCity();
            this.initUser();
        },
    }
</script>

<style scoped lang='less'>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        margin: 0, 0, 0, 10px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width:  195px;
        height: 105px;
        line-height: 105px;
        text-align: center;
    }
    .imgBody {
        width: 188px;
        height: 188px;
        float: left;
        font-size:26px;
        img{
            display: block;
            width: 188px;
            height: 188px;
            padding: 3px;
            background: #fff;
            border: 1px solid #d5d5d5;
        }
    }
    .uploadImgBody {
        margin-left: 5px;
        width:  195px;
        height: 105px;
        border: dashed 1px #c0c0c0;
        float: left;
        position: relative;
    }
    .uploadImgBody :hover {
        border: dashed 1px #00ccff;
    }
    .inputClass {
        position: absolute;
    }
    .el-dialog__body {
        padding-top: 10px;
        padding-bottom: 0px;
    }
    .el-dialog {
        min-height: 400px;
    }
    .el-upload__tip {
        margin-top: 10px;
        margin-left: 10px;
        color: #3e999f;
    }

    .upload-demo {
        margin-top: 50px;
    }
    .tipBox {
        margin-bottom: 30px;
    }
    .tip {
        font-size: 14px;
        font-weight: bold;
        color: 	#808080;
    }
    .tipItem {
        line-height: 22px;
        color: 	#A9A9A9;
    }
    .personage {
        width: 100%;
        min-height: 700px;
        .header{
            width: 100%;
            height: 5px;
            background-color: #C20C0C;
        }
        .wrapper{
            width: 980px;
            min-height: 700px;
            margin: 0 auto;
            background-color: #fff;
            border: 1px solid #d3d3d3;
            border-width: 0 1px;
            padding: 30px 40px;
            .person {
                width: 100%;
                height: 112px;
                margin-bottom: 52px;
                position: relative;
                // overflow: hidden;
                h3{
                    position: relative;
                    z-index: 1;
                    top:0;
                    height: 32px;
                    line-height: 32px;
                    color: #333;
                    font-size: 22px;
                    margin-bottom: 4px;
                    font-family: 'Microsoft YaHei';
                    font-weight: normal;
                    span{
                        float: left;
                    }
                }
            }
            .tabs {
                border-top: 2.5px solid #c20c0c;
                font-size: 15px;
                width: 100%;
            }
            .setting{
                height: 500px;
                width: 80%;
                margin-left: -53px;
            }
            .reset-pass {
                .title {
                    height: 30px;
                    line-height: 30px;
                    padding-left: 20px;
                    font-size: 14px;
                    font-weight: 600;
                    color:#000000;
                }
                hr {
                    width: 98%;
                }
                .personal {
                    width: 60%;
                    padding-right: 80px;
                    margin-top: -13px;
                    padding-top: 0px;
                }
            }
        }
    }
</style>